{extend name="index/head" /}

{block name="link"}
<link rel="stylesheet" href="__STATIC__/index/css/huzixun.css">
<link rel="stylesheet" href="__STATIC__/index/css/head.css">
<link rel="stylesheet" href="__STATIC__/index/css/hugeren.css">
{/block}
{block name="main"}

<div id="contentsd" v-cloak>
    <div>

        <div>
            个人中心
        </div>

        <div class="geleft">
            <div   :class=" state==0?'daoactive':''"  @click="daohang(0)">
                <img v-if="state==0"  :src="daohangye" />  <img   :src="daohangy"    v-else/>  <div>我的订单</div>
            </div>
            <div  :class="state==1?'daoactive':''"  @click="daohang(1)">
                <img  v-if="state==1" :src="daohangee" />  <img  v-else    :src="daohange" /> <div>我的积分</div>
            </div>
            <div  :class=" state==2?'daoactive':''"  @click="daohang(2)" >
                <img v-if="state==2"  :src="daohangse" />  <img     v-else  :src="daohangs" /> <div>修改密码</div>
            </div>
        </div>



        <div class="geright">
            <!--我的订单-->
            <div class="neis"  v-if="state==0">
                <div class="mtop">
                    <div>
                        <div><img :src="zhanghu" /><div>手机号码</div></div>
                        <div><div>153881903244</div><div>退出登录</div></div>
                    </div>
                    <div>
                        <div><img :src="daohange" /><div>我的积分</div></div>
                        <div><div>1000</div><div>查看积分记录</div></div>
                    </div>
                </div>
                <div class="mmiddle">
                       我的订单
                </div>

                <div class="mbottom">
                    <div :class="statee==0?'daoactives':''" @click="order(0)">全部</div>
                    <div :class="statee==1?'daoactives':''" @click="order(1)">未支付</div>
                    <div :class="statee==2?'daoactives':''" @click="order(2)">已支付</div>
                    <div :class="statee==3?'daoactives':''" @click="order(3)">已完成</div>
                </div>

                <div class="mbottomd">
                  <div class="mbottomt">
                     <div>订单编号</div> <div>预定时间</div><div>房型</div><div>入住时间</div><div>离店时间</div><div>房间数</div><div>人数</div><div>价格</div><div>订单状态</div>
                  </div>

                    <div class="mbottomy">
                        <div>
                            <div>01224</div>   <div>2019-09-16</div><div>总统套房</div><div>2019-05-16 周三</div><div>2019-05-17 周四</div><div>1</div><div>2</div><div>$1200</div><div>完成</div>
                        </div>
                        <div>
                            <div>01223</div>  <div>2019-09-16</div><div>总统套房</div><div>2019-05-16 周三</div><div>2019-05-17 周四</div><div>1</div><div>2</div><div>$1200</div><div>完成</div>
                        </div>
                    </div>
                </div>

            </div>
            <!--我的积分-->
            <div class="neie"  v-if="state==1">
                <div class="neief">我的积分明细</div>
                <div class="mbottom">
                    <div :class="stateej==0?'daoactives':''" @click="orderj(0)">全部</div>
                    <div :class="stateej==1?'daoactives':''" @click="orderj(1)">获取</div>
                    <div :class="stateej==2?'daoactives':''" @click="orderj(2)">使用</div>
                </div>
                <div class="mbottomd">
                    <div class="mbottomtj">
                        <div>时间</div><div>类型</div><div>积分</div><div>备注</div>
                    </div>
                    <div class="mbottomyj">
                        <div>
                        <div>2019-07-15 15:30</div><div>订房消费</div><div>-100</div><div>消费抵扣</div>
                        </div>
                        <div>
                            <div>2019-07-15 15:30</div><div>订房消费</div><div>-100</div><div>消费抵扣</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 修改密码-->
            <div class="neid"  v-if="state==2">
                <div class="xiugai">
                    修改密码
                </div>
                <form>
                    <div><div>原密码</div><input  type="text"  /></div>
                    <div><div>新密码</div><input  type="text"   /></div>
                    <div><div>确认新密码</div><input  type="text"    /></div>
                    <input   type="submit"  class="submit" />
                </form>

            </div>
        </div>

    </div>





</div>


{/block}


{block name="js"}
<script src="__STATIC__/index/js/jquery.3.3.1.min.js"></script>
<script src="__STATIC__/index/js/vue.js"></script>
<script src="__STATIC__/index/js/Page.js"></script>
{/block}

{block name="xia"}
<script>

    new Vue({
        el: "#contentsd",
        data: {
            state:0,   //这个是导航栏控制状态
            statee:0,  // 这个是我的订单状态控制
            stateej:0,  // 我的积分 内容导航栏状态控制
            daohangy:"__STATIC__/index/img/ge1.png",   // 我的订单
            daohange:"__STATIC__/index/img/ge2.png",  //我的积分
            daohangs:"__STATIC__/index/img/ge3.png", // 修改密码

            daohangye:"__STATIC__/index/img/gee1.png",   // 我的订单
            daohangee:"__STATIC__/index/img/gee2.png",  //我的积分
            daohangse:"__STATIC__/index/img/gee3.png", // 修改密码

            zhanghu:"__STATIC__/index/img/zhanghu.png",  // 账户图标
        },
        methods: {
            // 导航栏切换 最大导航栏
             daohang:function (index) {
                this.state=index
            },
            // 订单状态切换
            order:function (index) {
                this.statee=index
            },
            orderj:function (index) {
                this.stateej=index
            }
        },
        created() {
        },
        mounted() {

        }
    })



</script>
{/block}

